<template>
  <div>
    <brack :params1="'权限管理'" :params2="'权限列表'"></brack>
    <el-card class="box-card">
      <el-alert
        title="注意：只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
      >
      </el-alert>

      <div>
        选择商品分类 :
        <el-cascader
          :options="options"
          :props="props"
          v-model="see"
          clearable
          @change="handle"
        ></el-cascader>
        ==={{ see }}
      </div>
      ==={{ activeName }} ===={{ id }}
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 第一个pane -->
          <el-tab-pane label="动态参数" name="many">
            <!-- 用户管理表单 -->
            <template>
              <el-button
                type="primary"
                :disabled="disabled"
                style="margin-bottom:20px"
                >添加参数</el-button
              >
              <el-table style="width: 100%" stripe border :data="manylist">
                <el-table-column width="50" type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="商品名称">
                        <span>{{ props.row.name }}</span>
                      </el-form-item>
                      <el-form-item label="所属店铺">
                        <span>{{ props.row.shop }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column type="index" label="#"> </el-table-column>
                <el-table-column prop="attr_name" label="参数名称">
                </el-table-column>
                <el-table-column prop="path" label="操作" width="480">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                  ></el-button>

                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                  ></el-button>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <!-- 第二个pane -->
          <el-tab-pane label="静态属性" name="only">
            <!-- 用户管理表单 -->
            <template>
              <el-button
                type="primary"
                :disabled="disabled"
                style="margin-bottom:20px"
                >添加属性</el-button
              >
              <el-table style="width: 100%" stripe border :data="onlylist">
                <el-table-column label=" " width="50"> </el-table-column>
                <el-table-column type="index" label="#"> </el-table-column>
                <el-table-column prop="attr_name" label="属性名称">
                </el-table-column>
                <el-table-column prop="path" label="操作" width="480">
                </el-table-column>
              </el-table> </template
          ></el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
  </div>
</template>

<script>
import { cate_api, categories_api } from "@/api";
export default {
  data() {
    return {
      options: [],
      see: [],
      id: 0,
      props: {
        label: "cat_name",
        children: "children",
        value: "cat_id"
      },
      activeName: "many",
      manylist: [],
      onlylist: []
    };
  },
  created() {
    this.params();
  },
  methods: {
    async params() {
      const { data: res } = await cate_api({ type: 3 });
      console.log(res);
      this.options = res.data;
    },
    // 表单change事件
    async handle() {
      console.log(this.see);
      this.id = this.see[this.see.length - 1];
      console.log(this.id);

      const { data: res } = await categories_api({
        id: this.id,
        sel: this.activeName
      });
      console.log(res);
      if (this.activeName == "many") {
        this.manylist = res.data;
      } else {
        this.onlylist = res.data;
      }
    },
    handleClick(tab, event) {
      this.handle();
    }
  },
  computed: {
    disabled() {
      if (this.see.length != 3) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
<style scoped></style>
